<template>
  <div class="consumption">
    <el-row style="margin-top: 0">
      <el-col :span="activeName == '0' ? 24 : 24">
        <barChart
          v-if="dataArr.length !== 0"
          :height="height"
          :barData="dataArr"
          :xData="xData"
          :dataZoom="dataZoom"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import barChart from "@/views/home/consumption/components/barChart.vue";
export default {
  name: "consumption",
  components: {
    barChart,
  },
  props: {
    comConsdata: {
      type: Object,
      default: {},
    },
    height:{
      type: Number,
      default: 200,
    }
  },
  data() {
    return {
      activeName: "0",
      dataArr: [],
      xData: [],
      dataZoom: [],
    };
  },
  mounted() {},
  created() {
    this.reset();
  },
  methods: {
    /* 接收父级操作 */
    fatherTellmego(tip) {
      this.activeName = tip;
      this.reset();
      this.getBardata();
    },
    reset() {
      this.dataArr = [];
      this.xData = [];
    },
    getBardata() {
      // console.log(this.comConsdata, 222);
      if (this.activeName == "0") {
        // console.log(this.comConsdata.daypartingUsedStatics, 998);
        let yData = this.comConsdata.daypartingUsedStatics.yData;
        // let colorArr = ["#5087EC","#68BBC4","#58A55C","#F2BD42",]
        if (yData.length > 0) {
          yData.map((item) => {
            let obj = {
              name: item.name,
              data: item.data,
              type: "bar",
              // color: "#5087EC",
              label: {
                show: false,
                position: "outside",
              },
            };
            this.dataArr.push(obj);
          });
        }
        this.xData = this.comConsdata.daypartingUsedStatics.xData;
        this.dataZoom = [];
      } else if (this.activeName == "1") {
        // this.changeCheck();
        // console.log(this.comConsdata.deptUsedStatics, 999);
        let yData2 = this.comConsdata.deptUsedStatics.yData;
        // let colorArr2 = ["#5087EC","#68BBC4","#58A55C"]
        if (yData2.length > 0) {
          yData2.map((item) => {
            let obj = {
              name: item.name,
              data: item.data,
              type: "bar",
              // color: "#5087EC",
              label: {
                show: true,
                position: "top",
              },
            };
            this.dataArr.push(obj);
          });
        } else {
          let obj = {
            name: "",
            data: ["0.00"],
            type: "bar",
            // color: "#5087EC",
            label: {
              show: true,
              position: "top",
            },
          };
          this.dataArr.push(obj);
        }
        this.dataZoom = [
          {
            type: "inside",
            show: true,
            zoomLock: false, // 如果设置为 true 只能平移，不能缩放
            // xAxisIndex: [0], // 控制哪个X轴 多个X轴的时候生效
            // left: "9%",
            // bottom: -5, // slider生效
            start: 0,
            end: 90, //初始化滚动条
          },
        ];
        let xData2 = this.comConsdata.deptUsedStatics.xData;
        if (xData2.length > 0) {
          this.xData = xData2;
        } else {
          this.xData = [""];
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.consumption {
  width: 100%;
  .upup {
    position: absolute;
    top: 12px;
    left: 46%;
  }
  .cons-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lie {
    display: flex;
    // height: 200px;
    flex-direction: column;
    justify-content: center;
    .el-checkbox {
      margin: 5px 0;
    }
  }
}
</style>
